/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import DragTable from '@/components/DragTable';
import ProTable from '@ant-design/pro-table';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import { getAreaMangeList } from '@/services/Inn/ChargeCheck';
import { Input, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import AreamanageDrawer from './components/AreamanageDrawer';

const AreaManage: React.FC = () => {
  const actionRef = useRef<ActionType>();

  const formatAgency = (val: any) => {
    const str = val.map((item: { province: any; city: any; district: any }) => {
      const { province, city, district } = item;
      return province + city + district.toString();
    });
    return str.length ? str.reduce((pre: string, next: string) => pre + ' ' + next) : '-';
  };

  const undateList = () => {
    actionRef.current?.reload();
  };

  const columns: ProColumns<Record<string, string>>[] = [
    {
      title: '',
      dataIndex: 'keywords',
      hideInTable: true,
      renderFormItem: () => <Input placeholder='请输入加盟商手机号、id或名称' />,
    },
    {
      title: '序号',
      dataIndex: 'order',
      align: 'center',
      search: false,
    },
    {
      title: 'id',
      dataIndex: 'id',
      align: 'center',
      search: false,
    },
    {
      title: '加盟商名称',
      dataIndex: 'company_name',
      align: 'center',
      search: false,
    },
    {
      title: '加盟商类型',
      dataIndex: 'is_special',
      align: 'center',
      search: false,
      renderText: (val) => (val == '0' ? '普通' : '特许'),
    },
    {
      title: '加盟时间',
      dataIndex: 'valid_date',
      align: 'center',
      search: false,
    },
    {
      title: '联系人',
      dataIndex: 'concat_name',
      align: 'center',
      search: false,
    },
    {
      title: '联系方式',
      dataIndex: 'phone',
      align: 'center',
      search: false,
      renderText: (_, record) => record.contact_phone || record.phone,
    },
    {
      title: '地址',
      dataIndex: 'address',
      align: 'center',
      search: false,
    },
    {
      title: '代理区域',
      dataIndex: 'agency_area',
      align: 'center',
      search: false,
      render: (val = []) => formatAgency(val),
    },
    {
      title: '入库服务费',
      dataIndex: 'service_fee',
      align: 'center',
      search: false,
    },
    {
      title: '收取入库服务费分成比例',
      dataIndex: 'service_share_ratio',
      align: 'center',
      search: false,
      renderText: (val) => `${val}%`,
    },

    {
      title: '操作',
      align: 'center',
      search: false,
      fixed: 'right',
      width: '5%',
      render: (_, record) => (
        <AreamanageDrawer id={record.id} update={undateList}>
          <a>修改</a>
        </AreamanageDrawer>
      ),
    },
  ];

  return (
    <PageContainer>
      <DragTable>
        <ProTable<Record<string, string>>
          actionRef={actionRef}
          rowKey='id'
          request={getAreaMangeList}
          pagination={{
            pageSize: 20,
            showQuickJumper: false,
            showSizeChanger: false,
          }}
          columns={columns}
          options={false}
          scroll={{ x: 1600 }}
          search={{
            className: 'kb-pro-table-form',
            collapseRender: () => false,
          }}
          headerTitle={
            <AreamanageDrawer update={undateList}>
              <Button type='primary' style={{ marginLeft: '10px' }} icon={<PlusOutlined />}>
                添加新加盟商
              </Button>
            </AreamanageDrawer>
          }
        />
      </DragTable>
    </PageContainer>
  );
};

export default AreaManage;
